<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <ul v-if="Object.keys(dataInfo).length > 0">
        <p>基本信息</p>
        <li>
          <span>登录账号:</span>
          {{dataInfo.username}}
        </li>
        <li>
          <span>用户名:</span>
          {{dataInfo.name}}
        </li>
        <li>
          <span>账号类型:</span>
          {{dataInfo.roles[0].nameZh}}
        </li>
        <p>公司信息</p>
        <li>
          <span>名称:</span>
          {{dataInfo.companyName}}
        </li>
        <li>
          <span>单位类型:</span>
          {{dataInfo.companyTypeName}}
        </li>
        <li>
          <span>用水类型:</span>
          {{dataInfo.waterTypeName}}
        </li>
        <li>
          <span>单位地址:</span>
          {{dataInfo.address}}
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataInfo: {},
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { userObj } = this.$store.state && this.$store.state.user
      this.dataInfo = { ...userObj }
    },
  },
}
</script>

<style lang="scss" scoped>
.box-card {
  ul {
    li {
      margin: 30px 0;
      span {
        color: #999;
        margin-right: 10px;
      }
    }
  }
}
</style>>

